import { baseCanvas } from "./baseCanvas";
// 边框组件的属性、样式
export const borderAttrsStyles = (
	opts = { isReverse: false, isDur: false, isTitle: false, isAnimate: false },
	wh,
	xy
) => {
	const { isReverse, isDur, isTitle, isAnimate } = opts;
	return {
		// 属性(键名与右侧面板的tab的value保持一致)
		attrs: {
			...(isTitle && { title: "边框标题" }),
		},
		// 修改属性需要用到的组件
		attrsMap: {
			...(isTitle && {
				title: {
					label: "边框标题",
					cpn: "input",
				},
			}),
		},
		// 样式(键名与右侧面板的tab的value保持一致)
		styles: {
			color: ["#4fd2dd", "#235fa7"],
			backgroundColor: "transparent",
			...(isReverse && { reverse: false }), // 仅在 isReverse 为 true 时添加 reverse 属性
			...(isDur && { dur: 3 }),
			...(isTitle && { titleWidth: 250 }),
			...(isAnimate && { animate: true }),
		},
		// 修改样式需要用到的组件
		stylesMap: {
			backgroundColor: {
				label: "背景颜色",
				cpn: "colorPick",
			},
			color: {
				label: "边框颜色",
				subLabel: ["颜色一", "颜色二"],
				cpn: "colorPicks",
			},
			...(isReverse && {
				reverse: {
					label: "反转",
					cpn: "switch",
				},
			}),
			...(isDur && {
				dur: {
					label: "单次动画时长",
					cpn: "inputNumber",
				},
			}),
			...(isTitle && {
				titleWidth: {
					label: "标题宽度",
					cpn: "inputNumber",
				},
			}),
			...(isAnimate && {
				animate: {
					label: "边框动画",
					cpn: "switch",
				},
			}),
		},
		...baseCanvas(wh, xy, 0),
	};
};
